<template>
    <div>
        <span>获取验证码({{ time }}s)</span>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from 'vue';
// 倒计时的秒数  起始是5s
let time = ref<number>(5)
// 接收父组件传递过来的参数
let props = defineProps(["flag"]);
// 接收父组件传递过来的自定义方法
let $emit = defineEmits(["getFlag"])

// 监听flag的变化
watch(() => { props.flag }, () => {
    if(props.flag){
        // 开启定时器
        let timer = setInterval(() => {
        time.value--
        if (time.value == 0) {
            //通知父组件倒计时模式结束
            $emit('getFlag', false)
            // 清除定时器
            clearInterval(timer)
        }
    }, 1000)
    }else{
        return
    }
},
    // 立刻执行
    {
        immediate: true
    })

</script>

<style scoped lang="scss"></style>